<template>
  <div class="card-edit-event-select">
    <div class="card-edit-event-select-pre">
      <transition-group class="card-edit-event-select-pre-list" name="pre-list-open" tag="ul">
        <template v-for="(key, index) in CardEventsPreshowList">
          <li
            v-if="!bIsMoreShow && CardEventsJson[key] && !CardEventsJson[key].disabled && bIsApplied(key)"
            :key="index"
            class="card-edit-event-select-pre-item"
            @click="handlerSelect(key)">
              <el-button
                size="small"
                round
                :class="{ 'is-event-selected': curEvent && curEvent.type == key }">
                  <i :class="CardEventsJson[key].icon"></i>
                  {{CardEventsJson[key].label}}
              </el-button>
          </li>
        </template>

        <li key="card-edit-event-select-pre-item-btn" class="card-edit-event-select-pre-item" @click="bIsMoreShow=!bIsMoreShow" @mouseover.stop="handlerPreBtnShow(true)" @mouseleave.stop="handlerPreBtnShow(false)">
          <el-button size="small" :type=" !bIsMoreShow ? 'info' : 'warning' " round>
            <p style="display: flex; align-items: center;">
              <el-icon v-if="bIsMoreShow"><arrow-up /></el-icon>
              <el-icon v-else><grid /></el-icon>
              <!-- <i :class=" !bIsMoreShow ? 'jy-icon-customizeicon' : 'jy-icon-arrow-up' "></i> -->
              <transition name="open-left">
                <span style="display: inline-block" v-if="bIsPreBtnShow">点击{{ !bIsMoreShow ? '展开' : '收起' }}更多</span>
              </transition>
            </p>
          </el-button>
        </li>
      </transition-group>
    </div>

    <transition name="more-list-open">
      <div v-if="bIsMoreShow" class="card-edit-event-select-more">
        <ul class="card-edit-event-select-more-list">
          <template v-for="(key, index) in arrCardEventsJsonKeys">
            <li
              v-if="CardEventsJson[key] && !CardEventsJson[key].disabled && bIsApplied(key)"
              :key="index"
              class="card-edit-event-select-more-item"
              :class="{ 'is-event-selected': curEvent && curEvent.type == key }"
              @click="handlerSelect(key)">
                <i :class="CardEventsJson[key].icon"></i>
                <span>{{CardEventsJson[key].label}}</span>
            </li>
          </template>

          <li></li><li></li><li></li><li></li><li></li><li></li><li></li>
          <li></li><li></li><li></li><li></li><li></li><li></li><li></li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
  import { CardEventsJson, CardEventsPreshowList } from '@/views/card/js/data/cardEvents';

  export default {
    data() {
      return {
        CardEventsJson: CardEventsJson,
        CardEventsPreshowList: CardEventsPreshowList,
        bIsPreBtnShow: false,
        bIsMoreShow: false,
      }
    },
    props: {
      curEvent: Object,
      default: null,
      type: {
        type: String,
        default: undefined
      },
    },
    computed: {
      arrCardEventsJsonKeys() {
        return Object.keys(this.CardEventsJson);
      },
      bIsApplied() {
        return (key) => {
          return this.CardEventsJson[key].appliedRange ?
            this.CardEventsJson[key].appliedRange.indexOf(this.type) > -1 : true;
        }
      },
    },
    methods: {
      handlerPreBtnShow(bool) {
        if(bool && this.bIsPreBtnShow) return;
        this.bIsPreBtnShow = bool;
      },
      handlerSelect(key) {
        this.$emit('select', key);
      },
    },
  }
</script>

<style lang="scss">
  .open-left-enter-active, .open-left-leave-active {
    overflow: hidden;
    width: 72px;
    transition: all .3s;
  }
  .open-left-leave-active {
    transition: all .1s .5s;
  }
  .open-left-enter, .open-left-leave-to /* .open-left-leave-active below version 2.1.8 */ {
    width: 0px;
  }

  .more-list-open-enter-active, .more-list-open-leave-active {
    transform-origin: top center;
    transition: all .3s;
  }
  .more-list-open-enter, .more-list-open-leave-to /* .more-list-open-leave-active below version 2.1.8 */ {
    transform: scaleY(0);
    opacity: 0;
  }

  .pre-list-open-enter-active, .pre-list-open-leave-active {
    min-width: 0px;
    transform-origin: center left;
    transition: all .3s !important;
  }
  .pre-list-open-enter, .pre-list-open-leave-to /* .pre-list-open-leave-active below version 2.1.8 */ {
    transform: scaleX(0);
    width: 0px !important;
    opacity: 0;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  .card-edit-event-select {
    position: relative;
    width: 100%;
    padding: 10px 20px;

    .is-event-selected {
      border-color: #409eff;
      background-color: #409eff;
      color: #fff !important;

      i {
        color: #fff !important;
      }
      span {
        color: #fff !important;
      }
    }

    .card-edit-event-select-pre {
      // margin-bottom: 20px;

      .card-edit-event-select-pre-list {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        width: 100%;

        .card-edit-event-select-pre-item {
          font-size: 12px;
          margin: 8px 12px;
          transform-origin: center left;
          transition: all .1s;

          &:first-child {
            margin-left: 0;
          }
          &:last-child {
            margin-right: 0;
          }

          i {
            font-size: 14px;
          }
        }
      }
    }

    .card-edit-event-select-more {
      .card-edit-event-select-more-list {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        width: 100%;
        border-top: 1px solid #f0f0f0;

        li {
          width: 70px;
        }
        .card-edit-event-select-more-item {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          height: 50px;
          padding: 6px;
          margin: 20px 10px;
          color: #43475c;
          border: 1px solid rgba(0, 0, 0, .05);
          border-radius: 4px;
          transition: all .3s;

          &:hover {
            border: 1px solid #c6e2ff;
            color: #409eff;

            i {
              color: #409eff;
            }
          }
          &:active {
            border: 1px solid #3a8ee6;
            color: #3a8ee6;

            i {
              color: #3a8ee6;
            }
          }

          i {
            font-size: 20px;
            margin-bottom: 4px;
            color: #a4afbd;
            transition: all .3s;
          }
          span {
            font-size: 12px;
          }
        }
      }
    }
  }
</style>
